<template>
  <div class="home">
    <div class="block text-center">
      <el-carousel height="600px">
        <el-carousel-item>
          <img :src="u0" alt="图片" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="middle">
      <div class="head_title"><h1>如果您决定要成为"宠窝"平台的志愿者，为流浪动物献上一份爱心的话，那么请您在阅读完以下说明后，填写申请表并提交。我们会及时给予答复。</h1></div>
      <volunteerDom></volunteerDom>
      <formInfo></formInfo>
    </div>
  </div>
</template>
<script setup >
import u0 from '@/assets/images/ScientificRescue/u0.png'
import volunteerDom from './components/volunteerDom.vue';
import formInfo from './components/form.vue';
import {createApp } from "vue";

//注册组件
const app = createApp({});
app.component({volunteerDom,formInfo})
</script>
<style lang="less" scoped>
.middle {
  margin-top: -160px;
  padding: 0 200px;
 img{
  width: 100%;
  height: auto;
 }
  
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item img {
  width: 100vw;
  // height: 100vh;
  object-fit: contain; /* 或者 object-fit: cover; */
}

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
}
</style>